<template>
  <div class="medicine-category-container">
    <el-form :inline="true" class="search-form">
      <el-row>
        <el-col :span="10">
          <el-form-item label="分类名称:">
            <el-input
              v-model="categoryName"
              placeholder="请输入药品分类名称"
              style="width: 240px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button
            @click="queryCategoryHandler"
            type="primary"
            class="action-button"
            >查询</el-button
          >
          <el-button
            @click="addCategoryHandler"
            type="primary"
            class="action-button"
            >添加分类</el-button
          >
        </el-col>
      </el-row>
    </el-form>

    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      class="category-table"
    >
      <el-table-column
        prop="medicineCategoryId"
        label="分类ID"
      ></el-table-column>
      <el-table-column
        prop="medicineCategoryName"
        label="分类名称"
      ></el-table-column>
      <el-table-column prop="medicineCategoryCreateTime" label="创建时间">
        <template slot-scope="scope">
          {{ formatDate(scope.row.medicineCategoryCreateTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="medicineCategoryDelete" label="状态">
        <template slot-scope="scope">
          {{ scope.row.medicineCategoryDelete === 1 ? "已删除" : "正常" }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="deleteHandler(scope.row)"
            size="mini"
            class="delete-button"
            :disabled="scope.row.medicineCategoryDelete === 1"
            >删除</el-button
          >
          <el-button
            @click="updateCategoryHandler(scope.row)"
            size="mini"
            class="update-button"
            :disabled="scope.row.medicineCategoryDelete === 1"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <div class="pagination-container" style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 添加分类弹窗 -->
    <el-dialog
      title="添加药品分类"
      :visible.sync="addDialogVisible"
      width="30%"
      class="add-dialog"
    >
      <el-form class="add-form">
        <el-form-item
          label="分类名称"
          :rules="[
            { required: true, message: '请输入分类名称', trigger: 'blur' },
          ]"
        >
          <el-input
            v-model="addCategoryData.medicineCategoryName"
            placeholder="请输入药品分类名称"
            style="width: 240px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="addCategoryConfirmHandler"
          class="confirm-button"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改分类弹窗 -->
    <el-dialog
      title="修改药品分类"
      :visible.sync="updateDialogVisible"
      width="30%"
      class="update-dialog"
    >
      <el-form class="update-form">
        <el-form-item
          label="分类名称"
          :rules="[
            { required: true, message: '请输入分类名称', trigger: 'blur' },
          ]"
        >
          <el-input
            v-model="updateCategoryData.medicineCategoryName"
            placeholder="请输入药品分类名称"
            style="width: 240px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="updateCategoryConfirmHandler"
          class="confirm-button"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listMedicineCategory,
  deleteMedicineCategory,
  addMedicineCategory,
  updateMedicineCategory,
} from "@/api/drugs/medicineCategory";
import C from "highlight.js/lib/languages/1c";

export default {
  data() {
    return {
      categoryName: null,
      addDialogVisible: false,
      updateDialogVisible: false,
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 5,
      addCategoryData: {
        medicineCategoryName: null,
      },
      updateCategoryData: {
        medicineCategoryId: null,
        medicineCategoryName: null,
      },
    };
  },
  methods: {
    // 格式化时间
    formatDate(timestamp) {
      if (!timestamp) return "";
      const date = new Date(timestamp);
      return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")} ${date
        .getHours()
        .toString()
        .padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
    },
    // 查询分类
    queryCategoryHandler() {
      listMedicineCategory({
        medicineCategoryName: this.categoryName,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data;
          this.total = res.data.total;
        }
      });
    },
    // 添加分类
    addCategoryHandler() {
      this.addDialogVisible = true;
      this.addCategoryData = { medicineCategoryName: null };
    },
    // 确认添加
    addCategoryConfirmHandler() {
      addMedicineCategory(this.addCategoryData).then((res) => {
        if (res.code === 200) {
          this.$message.success("添加成功");
          this.addDialogVisible = false;
          this.queryCategoryHandler();
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    // 删除分类
    deleteHandler(row) {
      this.$confirm(`确定要删除【${row.medicineCategoryName}】吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteMedicineCategory(row.medicineCategoryId).then((res) => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.queryCategoryHandler();
          } else {
            this.$message.error("删除失败");
          }
        });
      });
    },
    // 修改分类
    updateCategoryHandler(row) {
      console.log("要修改的ID：", row.medicineCategoryId);
      this.updateDialogVisible = true;
      this.updateCategoryData = {
        medicineCategoryId: row.medicineCategoryId,
        medicineCategoryName: row.medicineCategoryName,
      };
    },
    // 确认修改
    updateCategoryConfirmHandler() {
      console.log("提交的修改数据：", this.updateCategoryData);
      updateMedicineCategory(this.updateCategoryData).then((res) => {
        if (res.code === 200) {
          this.$message.success("修改成功");
          this.updateDialogVisible = false;
          this.queryCategoryHandler();
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    // 分页相关
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.queryCategoryHandler();
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.queryCategoryHandler();
    },
  },
  mounted() {
    this.queryCategoryHandler();
  },
};
</script>

<style scoped>
</style>
